import { Component, OnInit, AfterViewInit, ViewChildren, ElementRef, Output, EventEmitter, OnDestroy } from '@angular/core';
import { DragDrop } from '@angular/cdk/drag-drop';
import { MapService } from '../../core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';
import { LayerMessageService } from '../../core/services/layer-message.service';
@Component({
  selector: 'app-short-card',
  templateUrl: './short-card.component.html',
  styleUrls: ['./short-card.component.scss']
})
export class ShortCardComponent implements OnInit, AfterViewInit, OnDestroy {
  cardList = [
    {
      icon: './assets/img/icon/icon_tc_ys1.png',
      title: '江苏',
      active: false,
      rlayer: ["Ra0UhorMgm"]
    },
    {
      icon: './assets/img/icon/icon_tc_ws1.png',
      title: '浙江',
      active: false,
      rlayer: ["PYcTaVCMgz", "wTPTaVCMR", "Kt9TaVjGg"]
    },
    {
      icon: './assets/img/icon/water_default.png',
      title: '安徽',
      active: false,
      rlayer: ['OUc0a4CMx']
    },
    {
      icon: './assets/img/icon/wsbz.png',
      title: '上海',
      active: false,
      rlayer: ["W7QPhorGg"]
    },
  ];
  data = null;
  visible = true;
  // 地图服务
  map = null;
  // 标识，设置当前地图加载未成功！
  ismaploading = false;
  // 后三个路由的切换不变换图里数据，也不触发给图层,让其添加数据！
  predata = null;
  subscription = [];
  routerChange: Subscription;
  // 获取modal对象
  @ViewChildren('shortcard') shortcard: ElementRef;
  constructor(
    private dragDrop: DragDrop,
    private router: ActivatedRoute,
    private layerMsgService: LayerMessageService,
    private mapService: MapService
  ) { }

  ngOnInit() {
    this.listenRouterChange();
    this.mapService.init().then((m: any) => {
      this.map = m;
      if (m.isStyleLoaded()) {
        this.mapInit();
      } else {
        m.on('load', () => {
          this.mapInit();
        });
      }
    });
   
  }
  listenRouterChange() {
    if (this.routerChange) {
      this.routerChange.unsubscribe();
    }
    this.routerChange = this.router.queryParamMap.subscribe((params: ParamMap) => {
      const id = params.get('id');
      this.getLayerData(id);
    });
  }
  getLayerData(flag) {
    this.layerMsgService.clearSpecleLayer(this.cardList);
    const filterText = '管线';
    switch (flag) {
      case 'overview':
        // this.layerLists.forEach(element => {
        //   if (!element.title.includes(filterText)) {
        //     element.active = true;
        //   } else {
        //     element.active = false;
        //   }
        // });
        break;
      default:
        this.cardList.forEach(element => {
          // element.active = true;
        });
        break;
    }
    if (this.ismaploading) {
      this.cardList.forEach(element => {
        postal.channel('MAP_TREE_CHANNEL').publish('nodeinfo', element);
      });
    }
  }

  mapInit() {
    this.ismaploading = true;
    this.cardList.forEach(element => {
      console.log(JSON.stringify(element))
      postal.channel('MAP_TREE_CHANNEL').publish('nodeinfo', element);
    });
  }
  // TODO:某一项状态改变
  onChange(item) {
    // 传递节点信息！
    console.log("item = " + JSON.stringify(item))
    console.log("item.rlayer = " + JSON.stringify(item.rlayer))
    // this.mapService.removeLayerByIds(item.rlayer);
    postal.channel('MAP_TREE_CHANNEL').publish('nodeinfo', { rlayer: item.rlayer, active: item.active });
  }

  changeCardStatus() {
    this.visible = !this.visible;
  }

  ngAfterViewInit() {
    const dom = document.getElementById('shortcuts');
    const dragModal = this.dragDrop.createDrag(dom);
    const title = document.getElementById('header');
    // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
    dragModal.withHandles([title]);
    // 限制拖拽区域在body中，防止溢出
    const domRouter = document.getElementById('contentRouter');
    dragModal.withBoundaryElement(domRouter);
  }

  ngOnDestroy() {
    this.subscription.forEach(element => {
      element.unsubscribe();
    });
    if (this.routerChange) {
      this.routerChange.unsubscribe();
    }
  }
}
